<template>

  <div class="demo1" id="mountNode">

  </div>

</template>

<script>
// 引入g6
import G6 from '@antv/g6'
// 引入数据
import demo1data from '@/vendor/treedata1.js'
// 引入节点的默认样式defaultNode1, defaultEdge1, defaultStateStyles1
import { defaultNode1, defaultEdge1, EXPAND_ICON, COLLAPSE_ICON, defaultLayout1 } from '@/utils/defaultstyle.js'

export default {
  name: 'Demo1',
  data () {
    return {

    }
  },
  methods: {
    // 初始化流程图 this上面已经挂载上了graph实例this.graph就可以添加其他属性
    initfn () {
      const self = this

      const mountNode = document.getElementById('mountNode')

      const width = mountNode.scrollWidth

      const height = mountNode.scrollHeight
      //   console.log(height)

      // 创键实例
      self.treeGraph = new G6.TreeGraph({
        container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width: width || 600, // Number，必须，图的宽度
        height: height || 600, // Number，必须，图的高度
        defaultNode: defaultNode1,
        defaultEdge: defaultEdge1,
        // 简单交互
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange (item, collapsed) {
                const icon = item.get('group').findByClassName('collapse-icon')
                if (collapsed) {
                  icon.attr('symbol', EXPAND_ICON)
                } else {
                  icon.attr('symbol', COLLAPSE_ICON)
                }
              }
            },
            'drag-canvas',
            'zoom-canvas'

          ]
        },
        // 布局
        layout: defaultLayout1
      })

      self.treeGraph.read(demo1data)
    }

  },
  mounted () {
    this.initfn()
  }
}
</script>

<style lang="less" scoped>
//更换画布的背景颜色
/deep/ canvas{
    background-color: rgba(167, 245, 212, 0.2);
}
.demo1{
    height: 100%;
    width: 100%;
}
</style>
